<template>
  <div class="system-container">
    <vab-query-form>
      <el-form :inline="true" :model="queryForm" @submit.native.prevent>
        <el-form-item class="pr8">
          <el-input
            v-model.trim="queryForm.APPLY_NUM"
            class="wd150"
            clearable
            placeholder="申请单号"
          />
        </el-form-item>
        <el-form-item class="pr8">
          <el-select
            v-model="queryForm.BLOOD_PURPOSE"
            class="wd150"
            clearable
            filterable
            placeholder="输血目的"
          >
            <el-option
              v-for="item in bloodPurposeList"
              :key="item.value"
              :label="item.label"
              :value="item.label"
            />
          </el-select>
        </el-form-item>
        <el-form-item class="pr8">
          <el-input
            v-model.trim="queryForm.MATCH_SHEET_NUM"
            class="wd150"
            clearable
            placeholder="配血单号"
          />
        </el-form-item>
        <el-form-item class="pr8">
          <el-input
            v-model.trim="queryForm.PATIENT_ID"
            class="wd150"
            clearable
            placeholder="门诊号"
          />
        </el-form-item>
        <el-form-item class="pr8">
          <el-input
            v-model.trim="queryForm.BLOOD_ID"
            class="wd150"
            clearable
            placeholder="血袋号"
          />
        </el-form-item>
        <el-form-item class="pr8">
          <el-input
            v-model.trim="queryForm.PAT_NAME"
            class="wd150"
            clearable
            placeholder="患者姓名"
          />
        </el-form-item>
        <el-form-item class="pr8">
          <el-date-picker
            v-model="queryForm.BEGIN_DATE"
            class="wd150"
            placeholder="开始日期"
            type="date"
            value-format="yyyy-MM-dd"
          />
        </el-form-item>
        <el-form-item>
          <el-date-picker
            v-model="queryForm.END_DATE"
            class="wd150"
            placeholder="结束日期"
            type="date"
            value-format="yyyy-MM-dd"
          />
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-search" type="primary" @click="queryData">
            查询
          </el-button>
        </el-form-item>
      </el-form>
    </vab-query-form>

    <el-table v-loading="listLoading" border :data="list" :height="580">
      <el-table-column
        align="center"
        label="配血单号"
        prop="MATCH_SHEET_NUM"
        show-overflow-tooltip
        width="70"
      />
      <el-table-column
        align="center"
        label="申请单号"
        prop="APPLY_NUM"
        show-overflow-tooltip
        width="70"
      />
      <el-table-column
        align="center"
        label="科室"
        prop="DEPT_NAME"
        show-overflow-tooltip
        width="90"
      />
      <el-table-column
        align="center"
        label="费别"
        prop="FEE_TYPE"
        show-overflow-tooltip
        width="70"
      />
      <el-table-column
        align="center"
        label="受血者"
        prop="PAT_NAME"
        show-overflow-tooltip
        width="60"
      />
      <el-table-column
        align="center"
        label="门诊号"
        prop="PATIENT_ID"
        show-overflow-tooltip
        width="80"
      />
      <el-table-column
        align="center"
        label="献血者"
        prop="NAME"
        show-overflow-tooltip
        width="70"
      />
      <el-table-column
        align="center"
        label="血员号"
        prop="BLOOD_DONOR_ID"
        show-overflow-tooltip
        width="80"
      />
      <el-table-column
        align="center"
        label="血袋号"
        prop="BLOOD_ID"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        label="血液成分"
        prop="BLOOD_TYPE_NAME"
        show-overflow-tooltip
        width="100"
      />
      <el-table-column
        align="center"
        label="受血者血型/RHD"
        prop="PAT_BLOOD_GROUP"
        show-overflow-tooltip
        width="80"
      >
        <template #default="{ row }">
          {{ `${row.PAT_BLOOD_GROUP} / ${row.PAT_RH}` }}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="献血者血型/RHD"
        prop="BLOOD_GROUP"
        show-overflow-tooltip
        width="80"
      >
        <template #default="{ row }">
          {{ `${row.BLOOD_GROUP} / ${row.RH}` }}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="储血量(U)"
        prop="BLOOD_CAPACITY"
        show-overflow-tooltip
        width="60"
      />
      <el-table-column
        align="center"
        :label="+bloodMatchTypePid === 2 ? '配血结果' : '子配血结果'"
        prop="blood_match_type_names"
        show-overflow-tooltip
        width="120"
      >
        <el-table-column
          align="center"
          label="配血方式"
          prop="province"
          width="80"
        >
          <template #default="scope">
            <span
              v-for="(item, index) in scope.row.blood_match_types"
              :key="index"
              class="span-block"
            >
              {{ item.blood_match_type_name }}
            </span>
          </template>
        </el-table-column>
        <template v-if="+bloodMatchTypePid === 1 || +bloodMatchTypePid === 7">
          <el-table-column
            align="center"
            label="主侧"
            prop="province"
            width="70"
          >
            <template #default="scope">
              <span
                v-for="(item, index) in scope.row.blood_match_types"
                :key="index"
                class="span-block"
              >
                {{ getResult(item.FIRST_RESULT) }}
              </span>
            </template>
          </el-table-column>

          <el-table-column
            align="center"
            label="次侧"
            prop="province"
            width="70"
          >
            <template #default="scope">
              <span
                v-for="(item, index) in scope.row.blood_match_types"
                :key="index"
                class="span-block"
              >
                {{ getResult(item.SECOND_RESULT) }}
              </span>
            </template>
          </el-table-column>
        </template>
        <template v-else>
          <el-table-column
            align="center"
            label="凝集强度"
            prop="province"
            width="70"
          >
            <template #default="scope">
              <span
                v-for="(item, index) in scope.row.blood_match_types"
                :key="index"
                class="span-block"
              >
                {{ getResult(item.AGGREGATION_INTENSITY) }}
              </span>
            </template>
          </el-table-column>
        </template>
        <el-table-column
          align="center"
          label="配血结果"
          prop="province"
          width="70"
        >
          <template #default="scope">
            <span
              v-for="(item, index) in scope.row.blood_match_types"
              :key="index"
              class="span-block"
            >
              {{ item.MATCH_RESULT || '' }}
            </span>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column
        align="center"
        label="直抗"
        prop="DAT"
        show-overflow-tooltip
        width="45"
      />
      <el-table-column
        v-if="+bloodMatchTypePid !== 2"
        align="center"
        label="配血结果"
        prop="MATCH_RESULT"
        show-overflow-tooltip
        width="70"
      />
      <el-table-column
        align="center"
        label="配血日期"
        prop="MATCH_DATE"
        show-overflow-tooltip
        width="75"
      >
        <template #default="{ row }">
          <div class="flex flex-column">
            <span>{{ getDate(row.MATCH_DATE)[0] }}</span>
            <span>{{ getDate(row.MATCH_DATE)[1] }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="配血者"
        prop="MATCH_OPERATOR"
        show-overflow-tooltip
        width="70"
      />
      <el-table-column
        align="center"
        label="停止日期"
        prop="STOP_DATE"
        show-overflow-tooltip
        width="75"
      >
        <template #default="{ row }">
          <div class="flex flex-column">
            <span>{{ getDate(row.STOP_DATE)[0] }}</span>
            <span>{{ getDate(row.STOP_DATE)[1] }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="输血目的"
        prop="BLOOD_PURPOSE"
        show-overflow-tooltip
        width="80"
      />
      <el-table-column
        align="center"
        label="用血时间"
        prop="NULL"
        show-overflow-tooltip
        width="75"
      >
        <template #default="{ row }">
          <div class="flex flex-column">
            <span>{{ getDate(row.NULL)[0] }}</span>
            <span>{{ getDate(row.NULL)[1] }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        fixed="right"
        label="操作"
        prop="NULL"
        show-overflow-tooltip
        width="90"
      >
        <template #default="{ row }">
          <el-button
            icon="el-icon-printer"
            size="mini"
            type="primary"
            @click="handleDetail(row)"
          >
            打印
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      :title="title"
      :visible.sync="dialogVisible"
      width="800px"
    >
      <print ref="print" name="match" />
    </el-dialog>
    <print ref="print" name="match" @fetchData="fetchData" />
  </div>
</template>

<script>
  import { PLAK0021 as getList } from '@/api/client'
  // import Report from '../report'
  import Print from '@/components/Print'
  import { mapGetters } from 'vuex'
  import { filterList } from '@/utils'
  import { bloodPurposeList } from '@/utils/constant'
  import { removeEmptyField } from '@/utils/index'
  export default {
    components: {
      // Report,
      Print,
    },
    props: {
      activeName: {
        type: String,
        default() {
          return 'third'
        },
      },
    },
    data() {
      return {
        bloodPurposeList,
        list: [],
        listLoading: false,
        selectRows: '',
        queryForm: {
          MATCH_SHEET_NUM: '',
          APPLY_NUM: '',
          PATIENT_ID: '',
          PAT_NAME: '',
          BEGIN_DATE: '',
          END_DATE: '',
          BLOOD_ID: '',
          MATCH_DATE: '',
          BLOOD_PURPOSE: '',
        },
        dialogVisible: false,
        bloodMatch: null,
        title: '',
      }
    },
    computed: {
      ...mapGetters({
        bloodMatchTypePid: 'initialData/bloodMatchTypePid',
      }),
    },
    watch: {
      // 'queryForm.MATCH_DATE': {
      //   handler(newVal) {
      //     this.queryForm.BEGIN_DATE = newVal[0]
      //     this.queryForm.END_DATE = newVal[1]
      //   },
      //   immediate: true,
      //   deep: true,
      // },
      bloodMatchTypePid() {
        if (this.activeName === 'third') {
          this.fetchData()
        }
      },
      activeName(newVal) {
        if (newVal === 'third') {
          this.fetchData()
        }
      },
    },
    created() {
      this.fetchData()
    },
    methods: {
      getResult(val) {
        if (typeof val === 'string') {
          return val
        }
        return val.join(',')
      },
      handlePrint(row) {
        this.$refs.print.show(row)
      },
      getDate(time) {
        if (time) {
          return time.substr(0, time.length - 3).split(' ')
        }
        return ['', '']
      },
      queryData() {
        this.fetchData()
      },
      async fetchData() {
        this.listLoading = true
        const { data } = await getList(removeEmptyField(this.queryForm)).catch(
          () => {
            this.listLoading = false
          }
        )
        this.list = filterList(data, this.bloodMatchTypePid)
        this.listLoading = false
      },
      async handleDetail(row) {
        this.queryForm = {
          ...this.queryForm,
          ...{ APPLY_NUM: row.APPLY_NUM, MATCH_SHEET_NUM: row.MATCH_SHEET_NUM },
        }
        const { data } = await getList(this.queryForm).catch(() => {
          this.listLoading = false
        })
        row.BLOODS = data
        this.bloodMatch = row
        this.$refs.print.show(row)
      },
      handleRefresh() {
        this.fetchData()
      },
      checkIsSelection() {
        const length = this.selectRows.length
        if (length !== 1) {
          this.$baseMessage(
            '请选择一条配血信息',
            'error',
            'vab-hey-message-error'
          )
          return false
        }
        return true
      },
    },
  }
</script>

<style lang="scss" scoped>
  .pr8 {
    padding-right: 8px;
  }
</style>
